<template>
	<yd-layout id='myCollect' class=''>
		<div class="nav">
			<div @click='navNum=1' :class="navNum==1?'nav_avtive':''" class="nav_list">
				<div class="nav_name">视频</div>
				<span></span>
			</div>
			<div @click='navNum=2' :class="navNum==2?'nav_avtive':''" class="nav_list">
				<div class="nav_name">文章</div>
				<span></span>
			</div>
			<div @click='navNum=3' :class="navNum==3?'nav_avtive':''" class="nav_list">
				<div class="nav_name">问题</div>
				<span></span>
			</div>
		</div>
		<div class="content">
			<div v-show="navNum==1" class="audio">

				<yd-infinitescroll v-show='audioList.length>0' :callback="getAudioCollects" ref="infinitescrollDemo">
					<VideoList :goVideoPlay = 'goVideoPlay' slot="list" class='index_video_list' :member='member' :dataList='audioList'></VideoList>
					<!-- 数据全部加载完毕显示 -->
					<span slot="doneTip">没有更多数据了~~</span>

					<!-- 加载中提示，不指定，将显示默认加载中图标 -->
					<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
				</yd-infinitescroll>
			</div>
			<NoList v-show='navNum==1&&audioList.length==0'>
				<img slot='img' src="../../assets/kong_3.png" alt="" />
			</NoList>
			<div v-show="navNum==2" class="article">
				<yd-infinitescroll v-show='articleList.length>0' :callback="getArticleCollects" ref="infinitescrollDemoArticle">
					<ArticleList slot="list" :dataList='articleList'></ArticleList>
					<!-- 数据全部加载完毕显示 -->
					<span slot="doneTip">没有更多数据了~~</span>

					<!-- 加载中提示，不指定，将显示默认加载中图标 -->
					<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
				</yd-infinitescroll>

			</div>
			<NoList v-show='navNum==2&&articleList.length==0'>
				<img slot='img' src="../../assets/kong_3.png" alt="" />
			</NoList>
			
			<div v-show="navNum==3" class="faq">
				<yd-infinitescroll v-show='faqList.length>0' :callback="getFaqList" ref="infinitescrollDemoFaq">
					<div slot="list" class="faq_list"  v-for="item,index in faqList"  @click="goFaqDetail(item)">
						{{index+1}}、{{item.question}}
					</div>
					<!-- 数据全部加载完毕显示 -->
					<span slot="doneTip">没有更多数据了~~</span>

					<!-- 加载中提示，不指定，将显示默认加载中图标 -->
					<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
				</yd-infinitescroll>

			</div>
			<NoList v-show='navNum==3&&faqList.length==0'>
				<img slot='img' src="../../assets/kong_3.png" alt="" />
			</NoList>
		</div>
	</yd-layout>
</template>

<script>
	import VideoList from '../../components/VideoList/VideoList.vue'
	import ArticleList from '../../components/ArticleList/ArticleList.vue'
	import CourseClassicalList from '../../components/CourseClassicalList/CourseClassicalList.vue'
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	import { BackTop } from 'vue-ydui/dist/lib.rem/backtop';
	export default {
		components: {
			[VideoList.name]: VideoList,
			[ArticleList.name]: ArticleList,
			[InfiniteScroll.name]: InfiniteScroll,
			[BackTop.name]: BackTop,
		},
		data() {
			return {
				navNum: 1,
				pageCount: 10,

				articleList: [],
				pageNum_article: 1,

				pageNum_audio: 1,
				audioList: [],
				
				pageNum_faq: 1,
				faqList:[],
				
				member:true

			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			document.title = '我的收藏'
			this.getAudioCollects()
			this.getArticleCollects()
			this.getFaqList() //问题列表
		},
		methods: {
			//去视频播放页面
			goVideoPlay(item){
				this.$root.videoPlayFlg(item)
			},
			getFaqList(){
				this.$root.ajax({
					name: 'qa/collect/lst',
					params: {
						page: this.pageNum_faq,
						count: this.pageCount,
					}
				}).then((d) => {
					this.faqList = [...this.faqList, ...d.data.qa_list];
                    if (this.faqList.length >= d.data.qa_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemoFaq.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemoFaq.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum_faq++;
				})
			},
			goFaqDetail(item){
				this.$router.push({
					name: 'faqDetail',
					query:{
						id:item.id
					}
				})
			},
			getAudioCollects() {
				this.$root.ajax({
					name: 'video/collects',
					type:'get',
					params: {
						page: this.pageNum_audio,
						count: this.pageCount,
					}
				}).then((d) => {

					this.audioList = [...this.audioList, ...d.data.video_list];
					if(this.audioList.length >= d.data.video_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

					this.pageNum_audio++;
				})
			},
			getArticleCollects() {
				this.$root.ajax({
					name: 'article/collects',
					type:'get',
					params: {
						page: this.pageNum_article,
						count: this.pageCount,
					}
				}).then((d) => {
					for(let a = 0 ; a<d.data.article_list.length;a++){
						d.data.article_list[a].newTime = this.$root.getDate(new Date(d.data.article_list[a].create_time*1000))
					}
					this.articleList = [...this.articleList, ...d.data.article_list];
					if(this.articleList.length >= d.data.article_total) {
						/* 所有数据加载完毕 */
						this.$refs.infinitescrollDemoArticle.$emit('ydui.infinitescroll.loadedDone');
						return;
					}

					/* 单次请求数据完毕 */
					this.$refs.infinitescrollDemoArticle.$emit('ydui.infinitescroll.finishLoad');

					this.pageNum_article++;
				})
			},
		}
	}
</script>

<style lang="scss">
	@import './myCollect.scss';
</style>